<template>
    <div class="Adetailrange">
        <div class="title_cont cur" @click="$router.back()"><i class="el-icon-arrow-left" style="margin-right: 1.6rem;"></i>消息详情</div>
        <div class="detailrange" v-loading="loading">
            <header>
                {{ info.title || '' }}
            </header>
            <div class="detailrangeContent htmlcontent" v-html="info.content"></div>
            <div class="share"></div>
        </div>
    </div>
</template>

<script>
import { messageDetail, messageViewed } from '@/api/message.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{
        bear_content
    },
    data() {
        return {
            loading: false,
            infoId: 0,
            info: {}
        }
    },
    mounted() {
        this.infoId = this.$route.query.id
        this.getInfo()
        this.messageViewed()
    },
    methods:{
        getInfo() {
            this.loading = true
            messageDetail({
                id: this.infoId
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.info = res.data
                }
            })
        },
        //消息已读
        messageViewed() {
            messageViewed({
                id: this.infoId
            }).then(res => {
            })
        },
        readFn(){
            this.$emit('closeFn')
        }
    }
}
</script>

<style lang="scss" scoped>
.msg_cont{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 34px 32px;
}
.title_cont{
    margin-bottom: 10px;
    font-size: 24px;
    color: #1A1A1A;
}

.Adetailrange {
    background: #fff;
    padding: 2rem;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    width: 100%;
    .detailrange {
        // width: 1200px;
        margin: auto;
        height: 100%;
        // background: bisque;
        header {
            // width: 1200px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 28px;
            color: #333333;
        }

        .time {
            // width: 1200px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #747474;

            .Xwidth {
                width: 2px;
                height: 12px;
                background: #a3a3a3;
            }
        }

        .detailrangeContent {
            // width: 1200px;
            height: calc(100% - 80px);
            font-size: 16px;
            color: #666666;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 6px;
                height: 1px;
            }
            &::-webkit-scrollbar-thumb { 
                border-radius: 5px;
                background-color:#019E69;
            }
            &::-webkit-scrollbar-track { 
                background: #fff;
                border-radius: 5px;
            }
            p {
                width: 100%;
                margin-top: 16px
            }
        }

        .share {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;

            .Qq {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                background: #43b5f0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>